<!-- 
  -->
<template>
  <div class="table-cell">
    <h1>Remaining/Available实际差额</h1>
    <el-table :data="tableData" style="width: 100%" border header-cell-class-name="table-header-row" :span-method="objectSpanMethod">
      <el-table-column prop="Department" label="Department" width="120" fixed />
      <el-table-column prop="Note" label="Note" width="80" fixed />
      <el-table-column prop="Total" label="Total" width="120" fixed />
      <el-table-column prop="2024-7-8" label="2024-7-8" width="120" />
      <el-table-column prop="2024-7-15" label="2024-7-15" width="120" />
      <el-table-column prop="2024-7-22" label="2024-7-22" width="120" />
      <el-table-column prop="2024-7-29" label="2024-7-29" width="120" />
      <el-table-column prop="2024-8-5" label="2024-8-5" width="120" />
      <el-table-column prop="2024-8-12" label="2024-8-12" width="120" />
      <el-table-column prop="2024-8-19" label="2024-8-19" width="120" />
      <el-table-column prop="2024-8-26" label="2024-8-26" width="120" />
      <el-table-column prop="2024-9-2" label="2024-9-2" width="120" />
      <el-table-column prop="2024-9-9" label="2024-9-9" width="120" />
      <el-table-column prop="2024-9-16" label="2024-9-16" width="120" />
      <el-table-column prop="2024-9-23" label="2024-9-23" width="120" />
      <el-table-column prop="2024-9-30" label="2024-9-30" width="120" />
      <el-table-column prop="2024-10-7" label="2024-10-7" width="120" />
      <el-table-column prop="2024-10-14" label="2024-10-14" width="120" />
      <el-table-column prop="2024-10-21" label="2024-10-21" width="120" />
      <el-table-column prop="2024-10-28" label="2024-10-28" width="120" />
      <el-table-column prop="2024-11-4" label="2024-11-4" width="120" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template>
          <el-button link type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-divider />
  <div class="table-cell">
    <h1>Total Requirement所有项目需求</h1>
    <el-table :data="tableData" style="width: 100%" border header-cell-class-name="table-header-row" :span-method="objectSpanMethod">
      <el-table-column prop="Department" label="Department" width="120" fixed />
      <el-table-column prop="Note" label="Note" width="80" fixed />
      <el-table-column prop="Total" label="Total" width="120" fixed />
      <el-table-column prop="2024-7-8" label="2024-7-8" width="120" />
      <el-table-column prop="2024-7-15" label="2024-7-15" width="120" />
      <el-table-column prop="2024-7-22" label="2024-7-22" width="120" />
      <el-table-column prop="2024-7-29" label="2024-7-29" width="120" />
      <el-table-column prop="2024-8-5" label="2024-8-5" width="120" />
      <el-table-column prop="2024-8-12" label="2024-8-12" width="120" />
      <el-table-column prop="2024-8-19" label="2024-8-19" width="120" />
      <el-table-column prop="2024-8-26" label="2024-8-26" width="120" />
      <el-table-column prop="2024-9-2" label="2024-9-2" width="120" />
      <el-table-column prop="2024-9-9" label="2024-9-9" width="120" />
      <el-table-column prop="2024-9-16" label="2024-9-16" width="120" />
      <el-table-column prop="2024-9-23" label="2024-9-23" width="120" />
      <el-table-column prop="2024-9-30" label="2024-9-30" width="120" />
      <el-table-column prop="2024-10-7" label="2024-10-7" width="120" />
      <el-table-column prop="2024-10-14" label="2024-10-14" width="120" />
      <el-table-column prop="2024-10-21" label="2024-10-21" width="120" />
      <el-table-column prop="2024-10-28" label="2024-10-28" width="120" />
      <el-table-column prop="2024-11-4" label="2024-11-4" width="120" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template>
          <el-button link type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-divider />
  <div class="table-cell">
    <h1>Total Headcount人事总人数</h1>
    <el-table :data="tableData" style="width: 100%" border header-cell-class-name="table-header-row" :span-method="objectSpanMethod">
      <el-table-column prop="Department" label="Department" width="120" fixed />
      <el-table-column prop="Note" label="Note" width="80" fixed />
      <el-table-column prop="Total" label="Total" width="120" fixed />
      <el-table-column prop="2024-7-8" label="2024-7-8" width="120" />
      <el-table-column prop="2024-7-15" label="2024-7-15" width="120" />
      <el-table-column prop="2024-7-22" label="2024-7-22" width="120" />
      <el-table-column prop="2024-7-29" label="2024-7-29" width="120" />
      <el-table-column prop="2024-8-5" label="2024-8-5" width="120" />
      <el-table-column prop="2024-8-12" label="2024-8-12" width="120" />
      <el-table-column prop="2024-8-19" label="2024-8-19" width="120" />
      <el-table-column prop="2024-8-26" label="2024-8-26" width="120" />
      <el-table-column prop="2024-9-2" label="2024-9-2" width="120" />
      <el-table-column prop="2024-9-9" label="2024-9-9" width="120" />
      <el-table-column prop="2024-9-16" label="2024-9-16" width="120" />
      <el-table-column prop="2024-9-23" label="2024-9-23" width="120" />
      <el-table-column prop="2024-9-30" label="2024-9-30" width="120" />
      <el-table-column prop="2024-10-7" label="2024-10-7" width="120" />
      <el-table-column prop="2024-10-14" label="2024-10-14" width="120" />
      <el-table-column prop="2024-10-21" label="2024-10-21" width="120" />
      <el-table-column prop="2024-10-28" label="2024-10-28" width="120" />
      <el-table-column prop="2024-11-4" label="2024-11-4" width="120" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template>
          <el-button link type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
defineProps({
  tableHeight: {
    type: Number,
    default: 500,
  },
})
const tableData = [
  {
    Department: 'MOD模型',
    Note: '',
    Total: 204.5,
    '2024-7-8': 3.0,
    '2024-7-15': 0.8,
    '2024-7-22': 0.7,
    '2024-7-29': 1.1,
    '2024-8-5': 0.9,
    '2024-8-12': 8.0,
    '2024-8-19': 8.0,
    '2024-8-26': 8.0,
    '2024-9-2': 8.0,
    '2024-9-9': 8.0,
    '2024-9-16': 8.0,
    '2024-9-23': 3.0,
    '2024-9-30': 3.0,
    '2024-10-7': 8.0,
    '2024-10-14': 8.0,
    '2024-10-21': 8.0,
    '2024-10-28': 8.0,
    '2024-11-4': 8.0,
  },
  {
    Department: 'SUR材质',
    Note: '含毛发',
    Total: '158.7',
    '2024-7-8': '(0.1)',
    '2024-7-15': '0.2',
    '2024-7-22': '0.3',
    '2024-7-29': '0.8',
    '2024-8-5': '1.6',
    '2024-8-12': '6.0',
    '2024-8-19': '6.0',
    '2024-8-26': '6.0',
    '2024-9-2': '6.0',
    '2024-9-9': '6.0',
    '2024-9-16': '6.0',
    '2024-9-23': '6.0',
    '2024-9-30': '6.0',
    '2024-10-7': '6.0',
    '2024-10-14': '6.0',
    '2024-10-21': '6.0',
    '2024-10-28': '6.0',
    '2024-11-4': '6.0',
  },
  {
    Department: 'RIG绑定',
    Note: '',
    Total: '76.8',
    '2024-7-8': '2.1',
    '2024-7-15': '1.1',
    '2024-7-22': '1.4',
    '2024-7-29': '0.9',
    '2024-8-5': '1.4',
    '2024-8-12': '1.0',
    '2024-8-19': '1.0',
    '2024-8-26': '1.0',
    '2024-9-2': '1.0',
    '2024-9-9': '1.0',
    '2024-9-16': '1.0',
    '2024-9-23': '5.0',
    '2024-9-30': '5.0',
    '2024-10-7': '1.0',
    '2024-10-14': '1.0',
    '2024-10-21': '1.0',
    '2024-10-28': '1.0',
    '2024-11-4': '1.0',
  },
  {
    Department: 'ANI动画',
    Note: '',
    Total: '(51.1)',
    '2024-7-8': '1.6',
    '2024-7-15': '(0.4)',
    '2024-7-22': '0.2',
    '2024-7-29': '(1.6)',
    '2024-8-5': '(0.9)',
    '2024-8-12': '9.0',
    '2024-8-19': '6.0',
    '2024-8-26': '6.0',
    '2024-9-2': '3.0',
    '2024-9-9': '3.0',
    '2024-9-16': '3.0',
    '2024-9-23': '3.0',
    '2024-9-30': '25.0',
    '2024-10-7': '(4.0)',
    '2024-10-14': '(4.0)',
    '2024-10-21': '(4.0)',
    '2024-10-28': '(4.0)',
    '2024-11-4': '(9.0)',
  },
  {
    Department: 'EFX特效',
    Note: '含CFX',
    Total: '(356.6)',
    '2024-7-8': '1.4',
    '2024-7-15': '0.8',
    '2024-7-22': '1.2',
    '2024-7-29': '(0.2)',
    '2024-8-5': '0.2',
    '2024-8-12': '0.0',
    '2024-8-19': '(4.0)',
    '2024-8-26': '(4.0)',
    '2024-9-2': '(9.0)',
    '2024-9-9': '(9.0)',
    '2024-9-16': '(9.0)',
    '2024-9-23': '(9.0)',
    '2024-9-30': '15.0',
    '2024-10-7': '(15.0)',
    '2024-10-14': '(15.0)',
    '2024-10-21': '(15.0)',
    '2024-10-28': '(15.0)',
    '2024-11-4': '(22.0)',
  },
  {
    Department: 'LGT灯光',
    Note: '含渲染',
    Total: '257.9',
    '2024-7-8': '9.9',
    '2024-7-15': '4.4',
    '2024-7-22': '6.9',
    '2024-7-29': '4.5',
    '2024-8-5': '3.2',
    '2024-8-12': '9.0',
    '2024-8-19': '9.0',
    '2024-8-26': '9.0',
    '2024-9-2': '9.0',
    '2024-9-9': '9.0',
    '2024-9-16': '9.0',
    '2024-9-23': '9.0',
    '2024-9-30': '28.0',
    '2024-10-7': '8.0',
    '2024-10-14': '8.0',
    '2024-10-21': '8.0',
    '2024-10-28': '8.0',
    '2024-11-4': '6.0',
  },
  {
    Department: '立体',
    Note: '',
    Total: '56.8',
    '2024-7-8': '0.8',
    '2024-7-15': '0.1',
    '2024-7-22': '0.0',
    '2024-7-29': '0.3',
    '2024-8-5': '0.6',
    '2024-8-12': '5.0',
    '2024-8-19': '5.0',
    '2024-8-26': '5.0',
    '2024-9-2': '5.0',
    '2024-9-9': '5.0',
    '2024-9-16': '5.0',
    '2024-9-23': '5.0',
    '2024-9-30': '5.0',
    '2024-10-7': '1.0',
    '2024-10-14': '1.0',
    '2024-10-21': '1.0',
    '2024-10-28': '1.0',
    '2024-11-4': '1.0',
  },
  {
    Department: 'PMD制片',
    Note: '',
    Total: '326.9',
    '2024-7-8': '9.2',
    '2024-7-15': '8.9',
    '2024-7-22': '10.1',
    '2024-7-29': '9.9',
    '2024-8-5': '10.0',
    '2024-8-12': '10.5',
    '2024-8-19': '10.5',
    '2024-8-26': '10.5',
    '2024-9-2': '10.5',
    '2024-9-9': '10.5',
    '2024-9-16': '10.5',
    '2024-9-23': '10.5',
    '2024-9-30': '13.5',
    '2024-10-7': '10.5',
    '2024-10-14': '10.5',
    '2024-10-21': '10.5',
    '2024-10-28': '10.5',
    '2024-11-4': '10.5',
  },
  {
    Department: 'Total Headcount',
    Total: '673.8',
    '2024-7-8': '27.9',
    '2024-7-15': '15.7',
    '2024-7-22': '20.7',
    '2024-7-29': '15.7',
    '2024-8-5': '16.9',
    '2024-8-12': '48.5',
    '2024-8-19': '41.5',
    '2024-8-26': '41.5',
    '2024-9-2': '33.5',
    '2024-9-9': '33.5',
    '2024-9-16': '33.5',
    '2024-9-23': '32.5',
    '2024-9-30': '100.5',
    '2024-10-7': '15.5',
    '2024-10-14': '15.5',
    '2024-10-21': '15.5',
    '2024-10-28': '15.5',
    '2024-11-4': '1.5',
  },
]
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (rowIndex === tableData.length - 1) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}
</script>
<style lang="scss" scoped>
.table-cell {
  h1 {
    font-size: 18px;
    text-align: left;
    margin-bottom: 10px;
  }
  & + .table-cell {
    margin-top: 30px;
  }
}
</style>
